<template>
  <div class="recipe">
    <!-- v-model="activeName" -->
    <!-- 菜谱分类 start -->
    <el-tabs v-model="name" type="border-card">
      <el-tab-pane label="菜系1">
        <div class="recipe-link">
          <router-link :to="{}" class="active"> 分类1 </router-link>
          <router-link :to="{}"> 分类2 </router-link>
          <router-link :to="{}"> 分类3 </router-link>
        </div>
      </el-tab-pane>
      <el-tab-pane label="菜系2">
        <div class="recipe-link">
          <router-link :to="{}" class="active"> 分类1 </router-link>
          <router-link :to="{}"> 分类2 </router-link>
          <router-link :to="{}"> 分类3 </router-link>
        </div>
      </el-tab-pane>
      <el-tab-pane label="菜系3">
        <div class="recipe-link">
          <router-link :to="{}" class="active"> 分类1 </router-link>
          <router-link :to="{}"> 分类2 </router-link>
          <router-link :to="{}"> 分类3 </router-link>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 菜谱分类 end -->
    <h2>家常好味道，给你家一般的温暖</h2>
    <el-container>
      <el-aside width="220px" class="recipe-aside">
        <div class="filter-box">
          <h4>筛选</h4>

          <el-select v-model="sid"  placeholder="请选择">
            <el-option
              v-for="(item,index) in bindscreen"
              :key="index"
              :label="item.ScreenName"
              :value="item.ScreenId"
              
            >
            </el-option>
          </el-select>
          

          <!-- v-model="activeName" -->
          <!-- 筛选 start -->
          <!-- <el-collapse v-model="bindscreen">
            <el-collapse-item title="早餐">
              <div class="filter-tags">
                <el-tag type="info"></el-tag>
              </div>
            </el-collapse-item>
            <el-collapse-item title="中餐">
              <div class="filter-tags">
                <el-tag type="info"></el-tag>
              </div>
            </el-collapse-item>
            <el-collapse-item title="晚餐">
              <div class="filter-tags">
                <el-tag type="info"></el-tag>
              </div>
            </el-collapse-item>
          </el-collapse> -->

          <!-- 筛选 end -->
        </div>
        
      </el-aside>
      <div class="llkk">
        <div style="float: left">
          <el-col
            style="flex: none"
            :style="{ 'margin-left': marginLeft + 'px' }"
          >
            <el-card
              :body-style="{ padding: '0px' }"
              v-for="(item, index) in showData"
              :key="index"
              style="float: left; margin-left: 20px"
            >
              <router-link :to="{ path: 'detail/' + item.CId }">
                <img
                  :src="item.CImg"
                  class="image"
                  style="width: 232px; height: 232px"
                />
                <div style="padding: 14px" class="menu-card-detail">
                  <strong>菜品名称:{{ item.CName }}</strong
                  ><br />
                  <span>{{ item.CNum }} 评论</span><br />
                  <router-link to="" tag="em">
                    作者:{{ item.CWriter }}
                  </router-link>
                </div>
              </router-link>
            </el-card>
          </el-col>
        </div>
        <div class="asd">
          <el-main class="filter-menus-box">
            <!--                <div class="menu-empty">暂时没有过滤出菜谱信息，请选择其他的筛选条件</div>-->
            <menu-card style="min-height: 75%"></menu-card>
            <div style="text-align: right">
              <el-pagination
                style="display: inline-block"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pageindex"
                :page-size="pagesize"
                layout="total, prev, pager, next"
                :total="totalcount"
              >
              </el-pagination>
            </div>
          </el-main>
        </div>
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bindscreen: [],
      showData: [],
      pageindex: 1,
      pagesize: 4,
      totalcount: 0,
      tid: "",
      codeid: "",
      sid: "",
    };
  },
  methods: {
    bindScreen() {
      this.$axios.get("http://localhost:55943/api/BindScreen").then((res) => {
        this.bindscreen = res.data;
      });
    },
    show() {
      this.$axios
        .get("http://localhost:55943/api/ShowPage", {
          params: {
            tid: this.tid,
            codeid: this.codeid,
            sid: this.sid,
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          this.showData = res.data.list;
          this.totalcount = res.data.totalcount;
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.show();
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.show();
    },
    li(){
      this.show();
    }
  },
  created() {
    this.show();
    this.bindScreen();
  },
};
</script>

<style scope>
.recipe-link {
  font-size: 0;
  margin-top: 5px;
}

a {
  display: inline-block;
  font-size: 12px;
  padding: 0px 8px;
  height: 28px;
  line-height: 28px;
}

.active {
  background: #ff3232;
  color: #fff;
  text-align: left;
}

.recipe h2 {
  text-align: center;
  line-height: 150px;
}

.el-main {
  padding: 0;
}

.filter-box {
  background: #fff;
  padding: 10px;
  width: 100%;
  float: left;
  box-sizing: border-box;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.tag-selected {
  background-color: #ff3232;
  color: #fff;
}

.menu-empty {
  width: 100%;
  text-align: center;
  font-size: 20px;
}
.llkk {
  background-color: #fff;
  width: 100%;
  height: 500px;
}
.asd {
  margin-top: 500px;
}
</style>